<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-20 flex v-align-c">
      <span></span>
      <i>启动弹窗</i>
    </h2>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <el-form-item label="弹窗状态">
        <el-radio v-model="customPage.AdImgList.popupsStatus" label="on">启用</el-radio>
        <el-radio v-model="customPage.AdImgList.popupsStatus" label="off">不启用</el-radio>
      </el-form-item>
      <el-form-item label="显示设置">
        <el-radio v-model="customPage.AdImgList.showSetting" label="1">每次显示</el-radio>
        <el-radio v-model="customPage.AdImgList.showSetting" label="2">间隔显示</el-radio>
      </el-form-item>
      <div class="pancel-tips-bar flex" style="align-items:center">
        <span class="demonstration mar-r-15">间隔时间</span>
        <el-slider v-model="customPage.AdImgList.intervalTime" class="flex-item" max="200"></el-slider>
        <el-input placeholder="请输入内容" class="mar-l-15" v-model="customPage.AdImgList.intervalTime" @input="setIntervalTime">
          <template slot="append">分钟</template>
        </el-input>
      </div>
      <div class="pancel-tips-bar" style="text-align: justify">添加多个将以轮播图形式展现,广告图片建议尺寸840*1284</div>
      <template>
          <div v-for="(item, index) of customPage.AdImgList.imgList" :key="index">
            <div class="drag-box">
              <div class="border-box btns-form flex v-align-c">
                <div class="pad-t-5 pad-b-7">
                  <el-form-item label="图片" label-width="42px" class="none-mar-b pad-b-10 uploads-bar">
                    <div class="height-60 mar-r-10">
                      <el-upload class="avatar-uploader"
                        action="/api/common/uploadFiles"
                        accept="image/jpeg,image/gif,image/png,image/bmp"
                        list-type="picture-card-ms"
                        :before-upload="beforeUpload" 
                        name="files"
                        :data="token" 
                        :show-file-list="false" 
                        :on-success="(res)=> handleUploadSuccess(res, index)">
                          <img v-if="item.imgUrl" :src="item.imgUrl" width="60px" height="60px">
                          <div v-else class="default-p-pic">
                            <div class="default-p-img"></div>
                            <div class="default-p-t">上传图片</div>
                          </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                  <el-form-item label="链接" label-width="42px" class="none-mar-b pad-b-10 mar-t-6">
                    <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                      @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                  </el-form-item>
                </div>
              </div>
              <div class="btn-edit-del selected">
                <div class="btn-del" @click="remove(index)">删除</div>
              </div>
            </div>
          </div>
      </template>
      <div>
        <el-button class="width-per-100" @click="addImg">+添加 {{customPage.AdImgList.imgList.length}}/10</el-button>
      </div>
    </el-form>
    <!-- 链接设置弹层 appType 13 为主播小程序-->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <component-link-layer v-if="customPage.appType !== 13" :appType="customPage.appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'
  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer
    },
    data() {
      return {
        radio: '',
        value8: 0,
        linkSetVisible: false,
        link: {},
        customPage: {
          AdImgList: {
            popupsStatus: 'off',
            showSetting: '1',
            intervalTime: 0,
            imgList: []
          }
        },
        fullScreenLoading: null,
        token: { accessToken: '' }
      }
    },
    props: {
      customPage1: {
        type: Object,
        default: null
      }
    },
    // 初始化页面
    created() {
      console.log(this.customPage1)
      this.customPage = this.customPage1
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetAdImgList', function(customPage) {
        that.customPage = customPage
      })
    },
    mounted() {

    },
    methods: {
      setIntervalTime($event) {
        this.customPage.AdImgList.intervalTime = $event * 1
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      handleUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.customPage.AdImgList.imgList[index].imgUrl = res.data[0]
          this.$bus.$emit('resetAdImgList', this.customPage)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      addImg() {
        const { imgList } = this.customPage.AdImgList
        if (imgList.length === 10) return
        imgList.push({
          imgUrl: '',
          linkRemark: ''
        })
      },
      remove(index) {
        const { imgList } = this.customPage.AdImgList
        imgList.splice(index, 1)
      },
      setLinkTemp(item) {
        Object.assign(this.link, item)
        this.linkSetVisible = false
      }
    }
  }
</script>

<style lang="less" scoped>
.pancel-tips-bar {
  /deep/ .el-input {
    width: 80px;
  }
  /deep/ .el-input__inner {
    padding: 0 8px;
  }
  /deep/ .el-input-group__append, .el-input-group__prepend {
    padding: 0 2px;
  }
}
.drag-box{
  position: relative;
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
    background-size: 16px 16px;
  }
}

</style>